<template>
    <div class="_table _discountActiveList">
        <!-- header -->
        <div class="_header">
            <div class="_title0">
                商品规格
            </div>
            <div class="_title1">
                学生价
            </div>
            <div
                v-for="(row,index) in list[0].data"
                :key="index"
                class="_titles"
                :style="{width: !row.sale_num ? '0px' : '', marginRight: !row.sale_num ? '0px' : '12px'}"
            >
                <template v-if="row.sale_num">
                    满{{ row.sale_num }}件团购价
                </template>
            </div>
        </div>

        <!-- content -->
        <div
            v-for="(row,index) in list"
            :key="index"
            class="_content"
        >
            <div class="_item">
                <p class="_item1">
                    <el-popover
                        placement="top-start"
                        width="200"
                        trigger="hover"
                        :content="row.spec_list"
                    >
                        <el-button
                            slot="reference"
                            type="text"
                            style="{color: 'rgba(51, 51, 51, 1)'}"
                        >
                            {{ row.spec_list }}
                        </el-button>
                    </el-popover>
                </p>
                <p class="_item2">
                    {{ row.goods_price ? `¥${row.goods_price}` : '--' }}
                </p>
                <p
                    v-for="(item,idx) in row.data"
                    :key="idx"
                    class="_items"
                    :style="{width: width[idx] + 'px'}"
                >
                    {{ item.sale_discount ? `¥${Number(item.sale_discount * row.goods_price / 10).toFixed(2)}` : '--' }}
                </p>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: '',
    props: {
        list: {
            type: Array,
            default: () => {},
        }
    },
    watch: {
        list: {
            handler (val) {
                console.log('val', val);
                this.$nextTick(() => {
                    this.getWeight();
                });
            },
            deep: true,
            immediate: true
        }
    },
    filter: {
    },
    data() {
        return {
            width: []
        };
    },
    mounted() {},
    methods: {
        getWeight () {
            let dom = document.querySelectorAll('._titles');
            let width = [];

            if(dom.length) {
                dom.forEach(el => {
                    width.push(el.getBoundingClientRect().width);
                });
                this.width = width;
            }
        }
    },
};
</script>

<style lang="less" scoped>
._table {
    // max-width: 903px;
    min-height: 44px;
    box-sizing: border-box;
    // border: 1px red solid;
    background: #ffffff;
    margin-right: 24px;
    ._header {
        height: 44px;
        display: flex;
        flex-direction: row;
        align-items: center;
        background: rgba(250, 250, 250, 1);
        flex-wrap: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        border: 1px solid #F4F4F4;
        padding: 0 24px;
        ._title0 {
            width: 110px;
            min-width: 110px;
            height: 44px;
            line-height: 44px;
            text-align: left;
            color: rgba(51, 51, 51, 1);
            font-size: 14px;
            font-weight: 500;
            margin-right: 12px;
        }
        ._title1 {
            height: 44px;
            width: 66px;
            text-align: center;
            line-height: 44px;
            color: rgba(51, 51, 51, 1);
            font-size: 14px;
            font-weight: 500;
        }
        ._titles {
            height: 40px;
            text-align: center;
            line-height: 40px;
            margin-right: 12px;
            white-space: nowrap;
            color: rgba(51, 51, 51, 1);
            font-size: 14px;
            font-weight: 500;
        }
        ._titles:last-child {
            margin-right: 0;
        }
    }
    ._content {
        display: flex;
        flex-direction: column;
        background: #ffffff;
        margin: 0 24px;
        ._item {
            height: 40px;
            display: flex;
            flex-direction: row;
            align-items: center;
            ._item1 {
                width: 110px;
                min-width: 110px;
                height: 44px;
                line-height: 44px;
                text-align: left;
                color: rgba(51, 51, 51, 1);
                font-size: 14px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                padding-right: 15px;
                margin-right: 12px;
            }
            ._item2 {
                height: 44px;
                width: 66px;
                text-align: center;
                line-height: 44px;
                color: rgba(51, 51, 51, 1);
                font-size: 14px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
            ._items {
                height: 44px;
                line-height: 44px;
                text-align: center;
                color: rgba(51, 51, 51, 1);
                font-size: 14px;
                margin-right: 12px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
            ._items:last-child {
                margin-right: 0;
            }
        }
    }
}
</style>

<style lang="less">
._discountActiveList {
    .el-button--text {
        color: rgba(51, 51, 51, 1);
    }
}
</style>
